<template>
	<view>
		<uni-nav-bar left-icon="back" title="登录" @clickLeft="goback" backgroundColor="'" fixed :border="false"></uni-nav-bar>
		<view class="img">
			<image src="/static/logobcg.png" mode=""></image>
		</view>
		<view class="cont">
			小程序需要登录注册才能使用相关功能，申请获取以下权限

			<view class="ts">
				获得你的公开信息(昵称、头像、手机号码等)
			</view>

			<view class="info" v-if="params.phone_code">
				<view class="items">
					<view class="texts">
						头像
					</view>
					<view class="btns" style="margin-left: 25rpx;">
						<image :src="imgurl?imgurl:'/static/logoimg.png'" mode=""></image>
						<button open-type="chooseAvatar" @chooseavatar='chooseavatar'></button>
					</view>
				</view>
				<view class="items">
					<view class="texts">
						昵称
					</view>
					<input type="nickname" placeholder="请输入昵称" v-model="params.user_nick" maxlength="7" />
				</view>
			</view>


			<view class="">
				<button class="btn1" v-show="loginValue" @click="logins">授权登录</button>
				<button class="btn1" v-show="!loginValue" open-type="getPhoneNumber" @getphonenumber="getphonenumber">授权手机号</button>
				<button class="btn2" @click="goback">暂不登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		login,getPhone,loginss
	} from '@/common/http.api.js'
	const loginValue = ref(false)
	const istrue = ref(false)
	const params = reactive({
		session_key:'',
		phone_code:'',
		user_nick:'',
		avatar:'',
	})
	const token = ref()
	onLoad(() => {
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				login({js_code:loginRes.code,}).then(res=>{
					params.session_key =  res.data.session_key
					if(res.data.userinfo){
						istrue.value = true
						params.user_nick =res.data.userinfo.nickname
						params.avatar =res.data.userinfo.avatar
						token.value = res.data.userinfo.token
						loginValue.value = res.data.userinfo.token ? true:false
					}
				})
			},
		})
	})
	// 拿到手机号
	function getphonenumber(e) {
		params.phone_code =  e.detail.code
		loginValue.value = true
	}
	function logins(){
		if(params.user_nick == ''|| params.avatar == ''){
			uni.showToast({
				title:'请设置头像昵称',
				icon:'none'
			})
			return
		}
		uni.showLoading({
			title: '登录中...'
		})
		if(istrue.value){
			setTimeout(()=>{
				uni.hideLoading()
				uni.setStorageSync('cirleToken',token.value)
				uni.navigateBack()
			},1500)
		}else{
			getPhone(params).then(res=>{
				if(res.code == 1){
					uni.setStorageSync('cirleToken', res.data.userinfo.token)
					uni.hideLoading()
					uni.navigateBack()
				}
			})
		}
		
	}

	function goback() {
		uni.navigateBack()
	}
	const imgurl = ref('')
	function chooseavatar(e) {
		imgurl.value = e.detail.avatarUrl
		uni.uploadFile({
			url: getApp().globalData.BASEURL+'/api/common/upload', // 后台上传接口
			filePath:e.detail.avatarUrl, // 上传图片 url
			name: 'file',
			header: {
				'Content-Type': 'multipart/form-data'
			},
			success(res) {
				let data = JSON.parse(res.data)
				params.avatar = data.data.url
			}
		});
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(90deg, #E5F8FF 0%, #FFF3F8 100%);
		height: 100vh;
	}

	.img {
		width: 540rpx;
		margin: 100rpx auto 64rpx;

		image {
			display: block;
			width: 540rpx;
			height: 376rpx;
		}
	}

	.cont {
		width: 630rpx;
		margin: 0 auto;

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #9494A6;
			margin: 40rpx 0rpx;
		}

		.info {
			margin-bottom: 100rpx;

			.btns {
				position: relative;

				button {
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					top: 0%;
					opacity: 0;
				}

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}
			}

			.items {
				height: 80rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 0rpx;
				margin: 10rpx auto;
				border-bottom: 1px solid #E4E4EA;

				.texts {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				input {
					font-size: 28rpx;
					padding-left: 25rpx;
				}
			}
		}

		.btn1 {
			width: 630rpx;
			height: 80rpx;
			background: #0756FF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}

		.btn2 {
			width: 630rpx;
			height: 80rpx;
			background: #E4E4EA;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #979797;
			line-height: 80rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	button::after {
		border: none;
	}
</style>